<template>
  <div class="Clock">
    <div class="time">{{ timeCal }}</div>
    <div class="date">{{ dateCal }}</div>
  </div>
</template>
<script>
export default {
  name: "Clock",
  data() {
    return {
      timeCal: null,
      dateCal: null,
      timer: null,
    };
  },
  mounted() {
    this.getCurrentTime();
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    getCurrentTime() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(this.getTime, 500);
    },
    getTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      this.timeCal = hh + ":" + mf + ":" + ss;
      this.dateCal = yy + "年 " + mm + "月 " + dd + "日 ";
    },
  },
};
</script>
<style lang="scss" scoped>
@font-face {
  font-family: LiquidCrystal-ExBold;
  src: url("~@/assets/font/LiquidCrystal-ExBold.otf");
}
.Clock {
  color: #e6e6e6;
  text-shadow: #020b1b 0px 0px 9px;
  padding-left: 24px;
  line-height: 24px;
  .time {
    font-size: 24px;
    font-family: LiquidCrystal-ExBold;
    font-weight: bold;
    letter-spacing: 1px;
  }
  .date {
    font-size: 14px;
    font-family: "Source Han Sans CN";
  }
}
</style>